import React from 'react'
import {withRouter} from 'react-router';
import {Route, BrowserRouter, Link} from 'react-router-dom'

const Index = ()=> {
    return <div>Index</div>
}

const About = ()=> {
    return <div>About</div>
}

const ListItemLink = ({...rest}) => {
    return <Route {...rest} children={()=>{
        return <div>Rendering by attr children</div>
    }}>
    </Route>
}

const BasicApp = ()=> {
    return <BrowserRouter basename="course01">
        <div>
            <ul>
                <li><Link to="/">Index</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/render_chidren">RenderByChildren</Link></li>
                <li><Link to="/render">RenderByRender</Link></li>
            </ul>
            <Route path="/" exact component={Index}></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/render" render={()=>{
                return <div>Rendering by func render</div>}
                }></Route>
            <ListItemLink path="/render_chidren"></ListItemLink>

        </div>
    </BrowserRouter>
}
export default BasicApp

// Route 组件渲染有三种方法,一是 component 属性, 第二种是 render 属性,给指定一个方法;
// 第三种是 children 属性, 和前两种不同的是 children 不管当前地址是否匹配,都会渲染,适合在一些特定的场景需要一直显示一些信息的时候使用;
